<template>
  <div style="width: 95%;margin: 0 auto;">
    <br>
    <div>
      <step v-model="step" background-color='#fbf9fe' gutter="20px">
        <step-item title="选择类别"></step-item>
        <step-item title="填写申请"></step-item>
        <step-item title="申请完成"></step-item>
      </step>
    </div>
    <br>
    <div v-show="scoreListShow">
      <grid :cols="3">
        <grid-item v-for="data in scoreTypeList" @click.native="getTypeList(data.key)" :key="scoreTypeList.key">
          <span class="grid-center" >{{data.name}}</span>
        </grid-item>
      </grid>
    </div>
    <div v-show="scoreListShow" v-for="(data,index) in additionalScoreList">
      <group>
        <cell :title="data.category + '-' + data.code">
          <img slot="icon" src="../assets/demo/icon/hot.png">
        </cell>
        <template >
          <div class="detial-form">
            <div>
              <label class="detial-form__label">类 别:</label>
              <span class="detial-form__value" style="padding:0px 10px">{{data.category}}</span>
            </div>
            <div>
              <label class="detial-form__label">分 值:</label>
              <span class="detial-form__value" style="padding:0px 10px">{{data.score}}</span>
            </div>
            <div>
              <label class="detial-form__label">内 容:</label>
              <span class="detial-form__value" style="text-align:left; padding:0px 0px 0px 25px">{{data.detail}}</span>
            </div>
            <x-button mini type="primary" @click.native="nextStep(data.scoreId, data.score, data.detail, data.category, data.code)">申 请</x-button>
          </div>
        </template>
      </group>
    </div>
    <div v-show="applyShow">
      <template>
        <div>
          <group label-width="4.5em" label-margin-right="2em" label-align="right">
            <cell title="积分类别" @click.native="detailShow()"><div style="color:blue">{{scorecat}}</div></cell>
            <datetime format="YYYY-MM" title="积分月度" v-model="timeShow" value-text-align="left"></datetime>
            <x-input title="分&emsp;&emsp;&nbsp;数" :placeholder="'必填:(1-'+originalScore+')'" :required="true"  type="number" v-model="score"></x-input>
            <x-textarea title="申请描述" placeholder="请填写详细信息" :show-counter="false" :rows="3" v-model="description"></x-textarea>
          </group>
          <br>
          <div style="padding:15px;">
            <flexbox>
              <flexbox-item>
                <x-button @click.native="PreviousStep()" :disabled="submitDisable" type="primary">上一步</x-button>
              </flexbox-item>
              <flexbox-item>
                <x-button @click.native="submitScore()" :disabled="submitDisable" type="primary">提 交</x-button>
              </flexbox-item>
            </flexbox>
          </div>
        </div>
      </template>
    </div>
    <div v-show="applyFinish">
      <msg title="申请成功" description="点击我的申请可以查看申请状态" icon="success"></msg>
      <div style="padding:15px;">
            <flexbox>
              <flexbox-item>
                <x-button link="/work" type="primary">完 成</x-button>
              </flexbox-item>
              <flexbox-item>
                <x-button link="/tabbar/myapply" type="primary">我的申请</x-button>
              </flexbox-item>
            </flexbox>
      </div>
    </div>
    <toast v-model="status" type='success'>操作成功</toast>
    <toast v-model="errorTosat" type='warn'>操作失败，分数输入错误 </toast>
    <toast v-model="inputError" type='warn'>请输入必填值</toast>
    <toast v-model="scopeError" type='warn'>请输入合适范围:1-{{originalScore}}</toast>
  </div>
</template>

<script>
import { CellBox, Cell, Group, Step, StepItem, XHr, XInput, PopupPicker, Datetime, XTextarea, XSwitch, XButton, Toast, Grid, GridItem, FlexboxItem, Flexbox, Msg} from 'vux'

export default {
  components: {
    CellBox,
    Cell,
    Group,
    Step,
    StepItem,
    XButton,
    XHr,
    XInput,
    PopupPicker,
    Datetime,
    XTextarea,
    XSwitch,
    Toast,
    Grid,
    GridItem,
    FlexboxItem,
    Flexbox,
    Msg
  },
  data () {
    var currentDate = new Date()
    var currentTimeStr = currentDate.getFullYear() + '-' + (currentDate.getMonth() + 1)

    //时间格式
    var tempDateStr = ''
    var tempDates = new Array()
    tempDates = currentTimeStr.split('-')
    var tempMonth = ''
    tempMonth = tempDates[1]
    if (tempMonth >= 1 && tempMonth <= 9) {
      tempMonth = "0" + tempMonth 
    }
    tempDateStr = tempDates[0] + '-' + tempMonth

    var ms_staffId = localStorage.getItem('ms_staffId')
    return {
      timeShow: tempDateStr,
      step: 0,
      showDetail001: false,
      scoreListShow: true,
      applyShow: false,
      applyFinish: false,
      staffId: ms_staffId,
      detail: '',
      description: '',
      time: currentTimeStr,
      dateList: [],
      scorecat: '',
      score: '',
      originalScore: '',
      status: false,
      errorTosat: false,
      inputError: false,
      scopeError: false,
      submitDisable: false,
      additionalScoreList: [],
      additionalScoreId: '',
      scoreTypeList: [{
        name: '售前支持',
        key: 'A'
      },{
        name: '团队协作',
        key: 'B'
      },{
        name: '挖掘项目机会',
        key: 'C'
      },{
        name: '分享',
        key: 'D'
      },{
        name: '个人工作表现',
        key: 'E'
      },{
        name: '活动组织',
        key: 'F'
      },{
        name: '人才推荐和保留',
        key: 'G'
      },{
        name: '个人能力发展',
        key: 'H'
      },{
        name: '公司/团队发展',
        key: 'I'
      }]
    }
  },
  mounted: function () {
  },
  methods: {
    nextStep (scoreId, score,detail, category, code) {
      this.step = 1
      this.scoreListShow = false
      this.applyShow = true
      this.additionalScoreId = scoreId
      this.score = score
      this.originalScore = score
      this.detail = detail
      this.scorecat = category + '-' + code
    },
    PreviousStep: function () {
      this.scoreListShow = true
      this.applyShow = false
      this.detail = ''
      this.description = ''
    },

    /*----提交分数----*/
    submitScore: function () {
      var self = this
      if (self.score=='') {
        self.inputError = true
      }else{
          if (self.score < 1 || self.score > self.originalScore) {
          self.scopeError = true
        }
      }
      //self.getdate()
      self.dateList = this.time.split('-')

      if (!self.inputError && !self.scopeError) {
        self.submitDisable = true
        self.$ajax({
        method: 'post',
        url: '../wx/userAdditional/save/'+self.staffId,
        data: {
          selfScore: self.score,
          additionalScoreId: self.additionalScoreId,
          description: self.description,
          status: '1',
          scoreType: 'TM',
          month: self.dateList[1],
          year: self.dateList[0]
        }
        })
        .then(function (res) {
          self.step = 2
          self.status = res.data
          if (!self.status) {
            self.errorTosat = true
          }
          self.name = ''
          self.score = ''
          self.time = ''
          self.scorecat = []
          self.description = ''
          self.scoreListShow = false
          self.applyShow = false
          self.applyFinish = true
        })
        .catch(function (err) {
          console.log(err)        
          self.errorTosat = true
        })
      }
      
    },
    getdate: function () {
      var tempDateStr = ''
      this.tempDate = this.time.split('-')
      var tempMonth = ''
      tempMonth = this.tempDate[1]
      if (tempMonth >= 1 && tempMonth <= 9) {
        tempMonth = "0" + tempMonth 
      }
      tempDateStr = this.tempDate[0] + '-' + tempMonth
      this.dateList = tempDateStr.split('-')
    },

    /*----进入功能时，获取积分类型----*/
    getTypeList: function (value) {
      var self = this
      self.$ajax({
        method: 'get',
        url: '../wx/userAdditional/list',
        params: {
          scoreType: 'TM',
          category: value
        }
      })
      .then(function (res) {
        self.additionalScoreList = res.data
      })
      .catch(function (err) {
        console.log(err)
      })
    },
    detailShow: function () {
      var text = this.detail
      this.$vux.alert.show({
        title: '详情信息',
        content: text
      })
    }
  }
}
</script>

<style lang="less">
.btn_wrap {
  padding: 0 1rem;
  margin-top: 2rem;
}
.detial-form {
    padding: 10px 15px;
    font-size: .9em;
    text-align: right;
    color: #999999;
    line-height: 2;
}
.detial-form__label {
    float: left;
    margin-right: 1em;
    min-width: 4em;
    color: #999999;
    text-align: justify;
    text-align-last: justify;
}
.detial-form__value {
    display: block;
    overflow: hidden;
    word-break: normal;
    word-wrap: break-word;
}
.grid-center {
  display: block;
  text-align: center;
  color: #666;
}
</style>
